<template>
  <div class="app-container">
    <el-form
      :model="form"
      ref="form"
      label-width="200px"
      v-loading="formLoading"
      :rules="rules"
    >
      <el-form-item label="问卷名称：" prop="wjName">
        <el-input v-model="form.wjName" />
      </el-form-item>
      <el-form-item label="问卷类型：" prop="wjName">
        <el-select v-model="form.wjType" placeholder="问卷类型">
          <el-option
            v-for="item in wjTypeEnum"
            :key="item.key"
            :value="item.key"
            :label="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        :key="index"
        :label="'标题' + (index + 1) + '：'"
        required
        v-for="(titleItem, index) in form.titleItems"
      >
        <el-input v-model="titleItem.name" style="width: 80%" />
        <el-button
          type="text"
          class="link-left"
          style="margin-left: 20px"
          size="mini"
          @click="addQuestion(titleItem)"
        >
          添加题目
        </el-button>
        <el-button
          type="text"
          class="link-left"
          size="mini"
          @click="form.titleItems.splice(index, 1)"
          >删除</el-button
        >
        <el-card
          class="exampaper-item-box"
          v-if="titleItem.questionItems.length !== 0"
        >
          <el-form-item
            :key="questionIndex"
            :label="'题目' + (questionIndex + 1) + '：'"
            v-for="(questionItem, questionIndex) in titleItem.questionItems"
            style="margin-bottom: 15px"
          >
            <el-row>
              <el-col :span="23">
                <QuestionShow
                  :qType="questionItem.questionType"
                  :question="questionItem"
                />
              </el-col>
              <el-col :span="1">
                <el-button
                  type="text"
                  size="mini"
                  @click="titleItem.questionItems.splice(questionIndex, 1)"
                  >删除
                </el-button>
              </el-col>
            </el-row>
          </el-form-item>
        </el-card>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
    <el-dialog :visible.sync="questionPage.showDialog" width="70%">
      <el-form :model="questionPage.queryParam" ref="queryForm" :inline="true">
        <el-form-item label="ID：">
          <el-input v-model="questionPage.queryParam.id" clearable></el-input>
        </el-form-item>
        <el-form-item label="题型：">
          <el-select v-model="questionPage.queryParam.questionType" clearable>
            <el-option
              v-for="item in questionTypeEnum"
              :key="item.key"
              :value="item.key"
              :label="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="queryForm">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table
        v-loading="questionPage.listLoading"
        :data="questionPage.tableData"
        @selection-change="handleSelectionChange"
        border
        fit
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column type="selection" width="35"></el-table-column>
        <el-table-column prop="id" label="Id" width="60px" />
        <el-table-column
          prop="questionType"
          label="题型"
          :formatter="questionTypeFormatter"
          width="70px"
        />
        <el-table-column prop="shortTitle" label="题干" show-overflow-tooltip />
      </el-table>
      <pagination
        v-show="questionPage.total > 0"
        :total="questionPage.total"
        :page.sync="questionPage.queryParam.pageIndex"
        :limit.sync="questionPage.queryParam.pageSize"
        @pagination="search"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="questionPage.showDialog = false">取 消</el-button>
        <el-button type="primary" @click="confirmQuestionSelect"
          >确定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters, mapState, mapActions } from "vuex";
import Pagination from "@/components/Pagination";
import QuestionShow from "../question/components/Show";
import wjApi from "@/api/wj";
import questionApi from "@/api/question";

export default {
  components: { Pagination, QuestionShow },
  data() {
    return {
      form: {
        id: null,
        wjName: "",
        wjType: "",
      },
      subjectFilter: null,
      formLoading: false,
      rules: {
        wjName: [{ required: true, message: "问卷名称", trigger: "blur" }],
        wjType: [{ required: true, message: "问卷类型", trigger: "blur" }],
      },
      questionPage: {
        multipleSelection: [],
        showDialog: false,
        queryParam: {
          id: null,
          questionType: null,
          subjectId: 1,
          pageIndex: 1,
          pageSize: 5,
        },
        listLoading: true,
        tableData: [],
        total: 0,
      },
      currentTitleItem: null,
      wjTypeEnum: [
        {
          key: 1,
          value: "宫颈癌问卷",
        },
        {
          key: 2,
          value: "乳腺癌问卷",
        },
      ],
    };
  },
  created() {
    let id = this.$route.query.id;
    let _this = this;
    this.initSubject(function () {
      _this.subjectFilter = _this.subjects;
    });
    if (id && parseInt(id) !== 0) {
      _this.formLoading = true;
      examPaperApi.select(id).then((re) => {
        _this.form = re.response;
        _this.formLoading = false;
      });
    }
  },
  methods: {
    submitForm() {
      let _this = this;
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.formLoading = true;
          wjApi
            .edit(this.form)
            .then((re) => {
              if (re.code === 1) {
                _this.$message.success(re.message);
                _this.delCurrentView(_this).then(() => {
                  _this.$router.push("/exam/paper/wjList");
                });
              } else {
                _this.$message.error(re.message);
                this.formLoading = false;
              }
            })
            .catch((e) => {
              this.formLoading = false;
            });
        } else {
          return false;
        }
      });
    },
    addTitle() {
      this.form.titleItems.push({
        name: "",
        questionItems: [],
      });
    },
    addQuestion(titleItem) {
      this.currentTitleItem = titleItem;
      this.questionPage.showDialog = true;
      this.search();
    },
    removeTitleItem(titleItem) {
      this.form.titleItems.remove(titleItem);
    },
    removeQuestion(titleItem, questionItem) {
      titleItem.questionItems.remove(questionItem);
    },
    queryForm() {
      this.questionPage.queryParam.pageIndex = 1;
      this.search();
    },
    confirmQuestionSelect() {
      let _this = this;
      this.questionPage.multipleSelection.forEach((q) => {
        questionApi.select(q.id).then((re) => {
          _this.currentTitleItem.questionItems.push(re.response);
        });
      });
      this.questionPage.showDialog = false;
    },
    levelChange() {
      this.form.subjectId = null;
      this.subjectFilter = this.subjects.filter(
        (data) => data.level === this.form.level
      );
    },
    search() {
      this.questionPage.queryParam.subjectId = this.form.subjectId;
      this.questionPage.listLoading = true;
      questionApi.pageList(this.questionPage.queryParam).then((data) => {
        const re = data.response;
        this.questionPage.tableData = re.list;
        this.questionPage.total = re.total;
        this.questionPage.queryParam.pageIndex = re.pageNum;
        this.questionPage.listLoading = false;
      });
    },
    handleSelectionChange(val) {
      this.questionPage.multipleSelection = val;
    },
    questionTypeFormatter(row, column, cellValue, index) {
      return this.enumFormat(this.questionTypeEnum, cellValue);
    },
    subjectFormatter(row, column, cellValue, index) {
      return this.subjectEnumFormat(cellValue);
    },
    resetForm() {
      let lastId = this.form.id;
      this.$refs["form"].resetFields();
      this.form = {
        id: null,
        level: null,
        subjectId: null,
        paperType: 1,
        limitDateTime: [],
        name: "",
        suggestTime: null,
        titleItems: [],
      };
      this.form.id = lastId;
    },
    ...mapActions("exam", { initSubject: "initSubject" }),
    ...mapActions("tagsView", { delCurrentView: "delCurrentView" }),
  },
  computed: {
    ...mapGetters("enumItem", ["enumFormat"]),
    ...mapState("enumItem", {
      questionTypeEnum: (state) => state.exam.question.typeEnum,
      levelEnum: (state) => state.user.levelEnum,
    }),
    ...mapState("exam", { subjects: (state) => state.subjects }),
  },
};
</script>

<style lang="scss">
.exampaper-item-box {
  .q-title {
    margin: 0px 5px 0px 5px;
  }
  .q-item-content {
  }
}
</style>
